<template>
  <div class="home">
    <header class="f-pk header-search f-dfc f-bgw">
      <router-link to="/search" class="iconfont icon-search f-tac f-666 f-fs14">{{hotword||'游戏搜索'}}</router-link>
      <router-link to="/notice" class="iconfont icon-message"></router-link>
    </header>
    <swiper :options="swiperOption" class="banner">
      <swiper-slide class="swiper-slide swiper-serve" v-for="(img,index) in carousel" :key="index">
        <router-link class="f-db" v-if="img" :to="img.caruoseltype=='game'?`/detail/${img.adurl}`:img.adurl">
          <img :src="img.imgurl" class="f-w100"/>
        </router-link>
      </swiper-slide>
      <p class="swiper-pagination"  slot="pagination"></p>   <!--分页 -->
    </swiper>
    <ul class="home-icon f-dfc f-tac f-fs14" v-if="indexicon">
      <router-link to="/download" v-for="item in indexicon" :key="item.index">
        <img :src="item.imgurl" class="icon"/>
        <p class="f-mp0">{{item.cn_name}}</p>
      </router-link>
    </ul>
    <router-link v-if="activity" :to="activity.adurl"><img :src="activity.imgurl" class="f-w100 bg"/></router-link>
    <router-link tag="h3" to="/sermore" v-if="serveData" class="main f-dfc">开服预告<p class="f-fx1 f-tar f-fs14 f-666">更多</p></router-link>
    <section class="main">
      <serve-list :data="serveData"/>
      <h3>热门游戏</h3>
      <ul v-if="hotGameData" class="f-dfc hot-list">
        <router-link tag="li" v-for="(item,index) in hotGameData" :key="index" :to="`/detail/${item.game_id}`" class="f-dfc">
          <div class="hot-desc">
            <p class="f-mp0 f-fs14 f-thd f-ib hot-text">{{item.name}}</p>
            <p class="f-thd f-ib hot-text hot-pub">{{item.cn_name}}</p>
            <p class="f-mp0 f-e85">首充{{item.min_rate|zero}}折起</p>
          </div>
          <img :src="item.imgurl" class="hot-img">
        </router-link>
      </ul>
      <h3>发现新游</h3>
      <find-list :data="newGameData"/>      
      <home-list/>
    </section>
  </div>
</template>

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'

import HomeList from '@/components/HomeList'
import ServeList from '@/components/ServeList'
import findList from '@/components/newGame'


export default {
  name: 'home',
  data(){
    return{
      carousel:null,
      indexdata:null,
      serveData:null,
      indexicon:null,
      activity:null,
      hotGameData:null,
      newGameData:null,
      hotword:'',
      swiperOption: {
        effect : 'fade',
        autoplay: {
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
        }, 
      }
    }
  },
  components: {
    HomeList,
    ServeList,
    findList
  },
  methods:{
    
  },
  created(){
    this.$ajax.Index.main().then(({data:{data:{carousel,indexdata,hotsearch}}})=>{
      
      this.carousel=carousel;
      this.hotword=hotsearch;
      indexdata.map(el=>{
        if(el.indextype==='serverlist'){//开服预告
          const data=el.data;
          this.serveData=data.map((el,ind,array)=>{
          const ser = new Date(+el.sertime*1e3),
            date = ser.getDate(),
            dates=new Date(),
            nows = dates.getDate(),
            nowsHour=dates.getHours(),
            serHours=ser.getHours(),
            serMinute=ser.getMinutes(),
            dateStr=nows<date?'明日':'今日',
            str=`${dateStr} ${this.$zero(serHours)}:${this.$zero(serMinute)}`;
            el.timename=str;
            //el.seracting=serHours-nowsHour>=1?true:false;
            //el.seracted=serHours-nowsHour<1?true:false;
            return el;
          })
        }else if(el.indextype==='indexicon'){//首页列表图标
          this.indexicon=el.data;
        }else if(el.indextype==='indexactivity'){//首页活动图片
          this.activity=el.data;
        }else if(el.indextype==='hotgame'){//热门游戏
          this.hotGameData=el.data;
        }else if(el.indextype==='newgame'){//发现新游
          this.newGameData=el.data.big_newgame
        }
      })
      //this.newGameData=min_newgame.sort(()=> Math.random() - .5).slice(0,3);随机取3条数据
      
      //this.tabGame()
    })
  }
}
</script>
<style lang="less" scoped>
.banner,.banner img{
	height:420px;
}
.icon-search{
  width:85%;
  padding:15px 0;
  margin:20px;
  border-radius: 40px;
  background-color: #f4f5f6;
  &:before{
    margin-right: 10px;
  }
}
.home-icon{
  justify-content: space-around;
}
.icon{
  width:150px;
  height: 150px;
}
.icon-message{
  font-size: 20PX;
  margin:10px 0 10px 0;
}
.hot-text{
  width:170px;
}
.hot-list{
  flex-wrap: wrap;
  li{
    width:50%;
    margin-bottom: 10px;
    img{
      .hot-text;
    }
  }
}
.hot-pub{
  margin:10px 0;
}

.hot-desc{
  width:50%;
}
</style>

